<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Segment - Standalone</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/core.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body onLoad="onLoad()">
    <ion-toolbar>
      <ion-segment value="Free">
        <ion-segment-button value="Paid">
          <ion-label>Paid</ion-label>
        </ion-segment-button>
        <ion-segment-button value="Free">
          <ion-label>Free</ion-label>
        </ion-segment-button>
        <ion-segment-button value="Top">
          <ion-label>Top</ion-label>
        </ion-segment-button>
      </ion-segment>
    </ion-toolbar>

    <ion-segment color="dark" value="Reading List">
      <ion-segment-button value="Bookmarks">
        <ion-icon name="book"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="Reading List">
        <ion-icon name="glasses"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="Shared Links">
        <ion-icon name="at"></ion-icon>
      </ion-segment-button>
    </ion-segment>

    <ion-segment id="browserSegment" color="danger">
      <ion-segment-button href="#bookmarks" value="bookmarks">
        <ion-label>Bookmarks</ion-label>
      </ion-segment-button>
      <ion-segment-button href="#reading" value="reading">
        <ion-label>Reading List</ion-label>
      </ion-segment-button>
      <ion-segment-button href="#links" value="links">
        <ion-label>Shared Links</ion-label>
      </ion-segment-button>
    </ion-segment>

    <pre><code><span id="browserResults"></span></code></pre>

    <ion-segment color="secondary" value="active">
      <ion-segment-button value="active">
        <ion-label>Active</ion-label>
      </ion-segment-button>
      <ion-segment-button value="disabled" disabled="true">
        <ion-label>Disabled</ion-label>
      </ion-segment-button>
      <ion-segment-button value="inactive" disabled="false">
        <ion-label>Inactive</ion-label>
      </ion-segment-button>
    </ion-segment>

    <ion-segment class="custom" value="active">
      <ion-segment-button value="active">
        <ion-label>Active</ion-label>
      </ion-segment-button>
      <ion-segment-button value="disabled" disabled="true">
        <ion-label>Disabled</ion-label>
      </ion-segment-button>
      <ion-segment-button value="inactive" disabled="false">
        <ion-label>Inactive</ion-label>
      </ion-segment-button>
    </ion-segment>

    <ion-segment class="custom-icon" value="instagram">
      <ion-segment-button class="segment-button-facebook" value="facebook">
        <ion-label>Facebook</ion-label>
        <ion-icon name="logo-facebook"></ion-icon>
      </ion-segment-button>
      <ion-segment-button class="segment-button-instagram" value="instagram">
        <ion-label>Instagram</ion-label>
        <ion-icon name="logo-instagram"></ion-icon>
      </ion-segment-button>
      <ion-segment-button class="segment-button-slack" value="slack">
        <ion-label>Slack</ion-label>
        <ion-icon name="logo-slack"></ion-icon>
      </ion-segment-button>
    </ion-segment>

    <ion-segment value="2" class="custom-indicator">
      <ion-segment-button value="1">
        <ion-icon name="home"></ion-icon>
      </ion-segment-button>
      <ion-segment-button class="large-icon" value="2">
        <ion-icon name="call"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="3">
        <ion-icon name="person"></ion-icon>
      </ion-segment-button>
    </ion-segment>

    <ion-segment value="2" class="custom-indicator">
      <ion-segment-button layout="icon-start" value="1">
        <ion-icon name="home"></ion-icon>
        <ion-label>Home</ion-label>
      </ion-segment-button>
      <ion-segment-button layout="icon-start" class="large-icon" value="2">
        <ion-icon name="call"></ion-icon>
        <ion-label>Call</ion-label>
      </ion-segment-button>
      <ion-segment-button layout="icon-start" value="3">
        <ion-icon name="person"></ion-icon>
        <ion-label>Person</ion-label>
      </ion-segment-button>
    </ion-segment>
  </body>

  <script>
    var segment = document.getElementById('browserSegment');
    var results = document.getElementById('browserResults');

    checkUrl();

    segment.addEventListener('ionChange', function () {
      checkUrl();
    });

    function checkUrl() {
      var url = window.location.href;

      if (url.search('#bookmarks') > -1) {
        setResults('bookmarks');
      } else if (url.search('#reading') > -1) {
        setResults('reading');
      } else if (url.search('#links') > -1) {
        setResults('links');
      }
    }

    function setResults(value) {
      results.innerHTML = value.charAt(0).toUpperCase() + value.slice(1);
      segment.value = value;
    }

    async function onLoad() {
      const customIconSegments = document.querySelectorAll('.custom-icon');

      for (var i = 0; i < customIconSegments.length; i++) {
        const customIconSegment = customIconSegments[i];

        if (customIconSegment.componentOnReady) {
          await customIconSegment.componentOnReady();
        }
        addIconClass(customIconSegment, customIconSegment.value);

        customIconSegment.addEventListener('ionChange', function (ev) {
          addIconClass(customIconSegment, ev.detail.value);
        });
      }
    }

    function addIconClass(el, value) {
      console.log('adding class to', el, value);
      if (value) {
        el.classList.remove('segment-facebook-checked', 'segment-instagram-checked', 'segment-slack-checked');
        el.classList.add(`segment-${value}-checked`);
      }
    }
  </script>

  <style>
    body {
      margin: 0;
    }

    ion-segment {
      margin-bottom: 10px;
    }

    ion-toolbar ion-segment {
      margin-bottom: 0;
    }

    pre {
      border: 1px solid #e6e9ee;
      background: white;
      margin: 10px;
      padding: 4px;
      line-height: 24px;
    }

    code {
      display: block;
      padding: 0.5em;
      background: #ffffff;
      word-wrap: normal;
      white-space: pre;
      color: #314361;
    }

    .custom {
      --background-checked: navy;
      --background: papayawhip;
      --border-color-checked: navy;
      --border-color-disabled: navy;
      --border-color: navy;
      --color-checked: papayawhip;
      --color-disabled: rgba(0, 0, 0, 0.3);
      --color: navy;
    }

    /*
   * Custom Icon Segment (Facebook, Instagram, Slack)
   */
    .custom-icon ion-icon {
      font-size: 44px;
    }

    /*
   * MD Custom Icon Segment (Facebook, Instagram, Slack)
   */
    .md .segment-facebook-checked .segment-button-facebook {
      --color-checked: #3a3d46;
      --indicator-color: #3a3d46;
    }

    .md .segment-instagram-checked .segment-button-instagram {
      --color-checked: #e4405f;
      --indicator-color: #e4405f;
    }

    .md .segment-slack-checked .segment-button-slack {
      --color-checked: #3aaf85;
      --indicator-color: #3aaf85;
    }

    /*
   * iOS Custom Icon Segment (Facebook, Instagram, Slack)
   */
    .ios .custom-icon {
      --indicator-color: transparent;
      --indicator-transition: none;
    }

    .ios .segment-facebook-checked .segment-button-facebook {
      --background-checked: #3a3d46;
      --color-checked: #ffffff;
    }

    .ios .segment-instagram-checked .segment-button-instagram {
      --background-checked: #e4405f;
      --color-checked: #ffffff;
    }

    .ios .segment-slack-checked .segment-button-slack {
      --background-checked: #3aaf85;
      --color-checked: #ffffff;
    }

    .ios .segment-button-facebook {
      --color: #3a3d46;
    }

    .ios .segment-button-instagram {
      --color: #e4405f;
    }

    .ios .segment-button-slack {
      --color: #3aaf85;
    }

    .custom-indicator {
      --indicator-color: lightgray;
    }

    .custom-icon ion-icon,
    .large-icon ion-icon {
      font-size: 44px;
    }
  </style>
</html>
